<%@ taglib prefix="for" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <title>我的家宾会</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/index.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/wode/styles.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/wode/jiabinhui/styles.css">
</head>

<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light ">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/index.jsp">
            <img src="${pageContext.request.contextPath}/images/index/logo.png" alt="" style="width: 10vw;">
        </a>

        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="#">酒店预订</a>
                <a class="nav-item nav-link" href="#">积分商城</a>
                <a class="nav-item nav-link" href="#">关于首旅如家</a>
            </div>

        </div>
        <div class="login">
            <img src="${pageContext.request.contextPath}/images/index/denglu.png" alt="">
            <c:if test="${empty curUser}">
                <a href="${pageContext.request.contextPath}/jsp/login.jsp">登录</a>|<a
                href="${pageContext.request.contextPath}/jsp/register.jsp">注册</a>
            </c:if>
            <c:if test="${not empty curUser}">
                <span>欢迎您，</span>
                <a href="${pageContext.request.contextPath}/InfoServlet?type=jiabinhui">${curUser.username}</a>|<a
                href="${pageContext.request.contextPath}/ExitServlet">退出</a>
            </c:if>
        </div>
    </nav>
</div>
<hr>
<div class="daohang">
    <ol class="breadcrumb" style="background-color:transparent;font-size:8px;">
        <li>当前位置： <a href="${pageContext.request.contextPath}/index.jsp">首旅如家</a>&nbsp;/&nbsp;</li>
        <li><a href="${pageContext.request.contextPath}/InfoServlet?type=jiabinhui">我的</a>&nbsp;/&nbsp;</li>
        <li class="active">&nbsp;我的家宾会</li>
    </ol>
</div>
<div class="zhong">
    <div class="zuo">
        <div class="zuoxiao"><a href="${pageContext.request.contextPath}/InfoServlet?type=jiabinhui"
                                class="cur">我的家宾会</a></div>
        <div class="zuoxiao"><a href="${pageContext.request.contextPath}/jsp/wodexinxi.jsp">我的信息</a></div>
        <div class="zuoxiao"><a href="${pageContext.request.contextPath}/DingdanInfoServlet">我的订单信息</a></div>
<%--        <div class="zuoxiao"><a href="${pageContext.request.contextPath}/CollectionHotelServlet?type=find">我的收藏酒店</a></div>--%>
<%--        <div class="zuoxiao"><a href="${pageContext.request.contextPath}/jsp/wodefapiaoguanli.jsp">发票管理</a></div>--%>
        <div class="zuoxiao"><a href="${pageContext.request.contextPath}/CommonAddressServlet?type=info">常用地址</a></div>
    </div>
    <div class="you">
        <div class="youshang">
            <div class="youshangshang">
                <div class="youshanglogo"><img height="100px" width="100px"
                                               src="${pageContext.request.contextPath}/images/wode/logo.png"></div>
                <div class="youshangxinxi">${curUser.username},您好！
                    <p></p>
                    <p style="font-size:4px">&nbsp;成长值;:&nbsp;${curUser.growth_value}/100</p>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                             aria-valuemax="100" style="width: ${curUser.growth_value}%;">
                            ${curUser.growth_value}%
                        </div>
                    </div>
                </div>
                <div class="youshanghuiyuan"><img height="100px" width="100px"
                                                  src="${pageContext.request.contextPath}/images/wode/huiyuanzhekou.png">
                </div>
                <div class="youshanghuiyuan"><img height="100px" width="100px"
                                                  src="${pageContext.request.contextPath}/images/wode/yudingjifen.png">
                </div>
                <div class="youshanghuiyuan"><img height="100px" width="100px"
                                                  src="${pageContext.request.contextPath}/images/wode/dingdanbaoliu.png">
                </div>
                <div class="youshanghuiyuan"><img height="100px" width="100px"
                                                  src="${pageContext.request.contextPath}/images/wode/yanchituifang.png">
                </div>
                <div class="youshanghuiyuanwb"><img height="100px" width="100px"
                                                    src="${pageContext.request.contextPath}/images/wode/mianfeizaocan.png">
                </div>
            </div>
            <div class="youshangxia">
                <div class="qianbao">
                    <div class="qianbaoshang"><img height="40px" width="40px"
                                                   src="${pageContext.request.contextPath}/images/wode/qianbao.png">&nbsp;钱包
                    </div>
                    <div class="qianbaoxia">
                        <div class="qianbaoxiaxiao">
                            <p style="font-size: 25px;color: #c0191f;">${curUser.integral}</p>
                            <p style="font-size: 15px;">积分</p>
                        </div>
                        <div class="qianbaoxiaxiao">
                            <p style="font-size: 25px;color: #c0191f;">${curUser.points}</p>
                            <p style="font-size: 15px;">积点</p>
                        </div>
                        <div class="qianbaoxiaxiao">
                            <p style="font-size: 25px;color: #c0191f;">￥${curUser.balance}</p>
                            <p style="font-size: 15px;">余额</p>
                        </div>
                        <div class="qianbaoxiaxiao">
                            <p style="font-size: 25px;color: #c0191f;">${curUser.carbon_points}</p>
                            <p style="font-size: 15px;">碳积分</p>
                        </div>
                    </div>

                </div>
                <div class="quan">
                    <div class="quanbaobiankuang"></div>
                    <div class="quankuang">
                        <div class="quanshang"><img height="40px" width="40px"
                                                    src="${pageContext.request.contextPath}/images/wode/quan.png">我的订单
                        </div>
                        <div class="quanxia">
                            <div class="qiuanxiaxiao">
                                <p style="font-size: 25px;color: #c0191f;" onclick="done()">${fn:length(doneOrder)}</p>
                                <p style="font-size: 15px;">已完成订单</p>
                            </div>
                            <div class="qiuanxiaxiao">
                                <p style="font-size: 25px;color: #c0191f;" onclick="undone()">${fn:length(undoneOrder)}</p>
                                <p style="font-size: 15px;">未完成订单</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="youxia">
            <div id="done" class="done" style="display: none">
                <div class="wodexingcheng">
                    <img height="30px" width="30px" src="${pageContext.request.contextPath}/images/wode/xingcheng.png">已完成订单
                </div>
                <c:choose>
                    <c:when test="${fn:length(doneOrder)!=0}">
                        <div class="youxiashang">
                            <div class="youxiashangxiao">订单序号</div>
                            <div class="youxiashangxiao">宾馆</div>
                            <div class="youxiashangxiao">房间号码</div>
                            <div class="youxiashangxiao">入住时间</div>
                            <div class="youxiashangxiao">离店时间</div>
                            <div class="youxiashangxiao">订单价格</div>
                        </div>
                        <div style="width: 100%">
                            <table style="width: 100%;" class="table table-hover">
                                <c:forEach items="${doneOrder }" var="order" varStatus="inde">
                                    <tr>
                                        <td class="bgsize">${fn:length(doneOrder)-inde.index}</td>
                                        <td class="bgsize">${order.hotel_name}</td>
                                        <td class="bgsize">${order.room_number}</td>
                                        <td class="bgsize" style="font-size: 12px"><fmt:formatDate
                                                value="${order.check_in_time}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        <td class="bgsize" style="font-size: 12px"><fmt:formatDate
                                                value="${order.departure_time}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        <td class="bgsize">${order.order_price}</td>
                                    </tr>
                                </c:forEach>
                            </table>

                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="wodexingchengneirong">您目前没有已完成订单</div>
                    </c:otherwise>
                </c:choose>


            </div>
            <div id="undone" class="undone" style="display: none">
                <div class="wodexingcheng"><img height="30px" width="30px"
                                                src="${pageContext.request.contextPath}/images/wode/xingcheng.png">未完成订单
                </div>
                <c:choose>
                    <c:when test="${fn:length(undoneOrder)!=0}">
                        <div class="youxiashang">
                            <div class="youxiashangxiaos">订单序号</div>
                            <div class="youxiashangxiaos">宾馆</div>
                            <div class="youxiashangxiaos">房间号码</div>
                            <div class="youxiashangxiaos">入住时间</div>
                            <div class="youxiashangxiaos">离店时间</div>
                            <div class="youxiashangxiaos">订单价格</div>
                            <div class="youxiashangxiaos">操作</div>
                        </div>
                        <div style="width: 100%">
                            <table style="width: 100%;" class="table table-hover" >
                                <c:forEach items="${undoneOrder }" var="order" varStatus="inde">
                                    <tr>
                                        <td class="bgsizes">${fn:length(undoneOrder)-inde.index}</td>
                                        <td class="bgsizes">${order.hotel_name}</td>
                                        <td class="bgsizes">${order.room_number}</td>
                                        <td class="bgsizes" style="font-size: 12px"><fmt:formatDate
                                                value="${order.check_in_time}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        <td class="bgsizes" style="font-size: 12px"><fmt:formatDate
                                                value="${order.departure_time}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        <td class="bgsizes">${order.order_price}</td>
                                        <td class="bgsizes"><a href="${pageContext.request.contextPath}/InfoServlet?type=tuisu&order_id=${order.order_id}"><input type="button" value="退宿" style="display: inline-block"></a></td>
                                    </tr>
                                </c:forEach>
                            </table>

                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="wodexingchengneirong">您目前没有未完成的订单</div>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid model-8">
    <div class="container">
        <div class="row">
            <div class="col-2">
                <ul>
                    <li>
                        <h5>酒店预订</h5>
                    </li>
                    <li><a href="javascript:void(0)">地图预订</a></li>
                    <li><a href="javascript:void(0)">企业客户申请</a></li>
                    <li><a href="javascript:void(0)">目录预订</a></li>
                </ul>
            </div>
            <div class="col-2">
                <ul>
                    <li>
                        <h5>家宾会</h5>
                    </li>
                    <li><a href="javascript:void(0)">会员手册</a></li>
                    <li><a href="javascript:void(0)">会员公告</a></li>
                    <li><a href="javascript:void(0)">积分商城</a></li>
                </ul>
            </div>
            <div class="col-2">
                <ul>
                    <li>
                        <h5>加盟合作</h5>
                    </li>
                    <li><a href="javascript:void(0)">高端酒店品牌</a></li>
                    <li><a href="javascript:void(0)">中高端品牌</a></li>
                    <li><a href="javascript:void(0)">经济型商旅品牌</a></li>
                    <li><a href="javascript:void(0)">亲子品牌</a></li>
                    <li><a href="javascript:void(0)">软品牌云酒店</a></li>
                    <li><a href="javascript:void(0)">华驿系列轻加盟</a></li>
                    <li><a href="javascript:void(0)">招商会行程</a></li>
                </ul>
            </div>
            <div class="col-2">
                <ul>
                    <li>
                        <h5>酒店集团</h5>
                    </li>
                    <li><a href="javascript:void(0)">企业文化</a></li>
                    <li><a href="javascript:void(0)">大事记</a></li>
                    <li><a href="javascript:void(0)">品牌介绍</a></li>
                    <li><a href="javascript:void(0)">集团快讯</a></li>
                    <li><a href="javascript:void(0)">投资者关系</a></li>
                    <li><a href="javascript:void(0)">联系我们</a></li>
                    <li><a href="javascript:void(0)">招贤纳士</a></li>
                    <li><a href="javascript:void(0)">工程招标</a></li>
                </ul>
            </div>
            <div class="col-4">
                <div class="content">

                    酒店预订电话<br>
                    <span>400 820 3333 或 1010 3333</span><br> 服务时间为7点-24点
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid footer">
    © 2021 Homeinns Co.,Ltd All Rights Reserved.酒店管理（上海）有限公司
</div>
</body>

</html>